<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <!-- 定义路由 -->
        <li><a href="#/Home">Home</a></li>
        <li><a href="#/About">About</a></li>

        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
    </ul>

    <script>

        // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
        window.addEventListener('DOMContentLoaded', onLoad)
        // 监听路由变化
        window.addEventListener('hashchange', onHashChange)

        // 路由视图
        var routerView = null

        function onLoad() {
            routerView = document.querySelector('#routeView')
            onHashChange()
        }

        // 路由变化时，根据路由渲染对应 UI
        function onHashChange() {
            switch (location.hash) {
                case '#/Home':
                routerView.path='Home.html'
                    return
                case '#/About':
                    routerView.innerHTML = 'About'
                    return
                default:
                    return
            }
        }

    </script>
</body>

</html>